<template>
    <view class="container" v-if="project">
        <view class="banner">
            <image :src="iconUrl+'详情背景.jpg'"></image>
        </view>
        <view class="topTitle">
            <view class="companyName">
                <view>
                    <image mode="heightFix" :src="iconUrl+'工具箱圆圈.png'"></image>
                </view>
                <view>
                    <text>{{project.corpName}}</text>
                </view>
            </view>
            <view class="companyInfo">
                <view class="greenBar"></view>
                <view>
                    <text>公司介绍</text>
                </view>
            </view>
            <view>
                <text v-if="project.companyDesc === ''" style="font-size:26rpx">这个公司很神秘, 什么也没留下~</text>
                <text v-if="project.companyDesc !== ''" style="font-size:26rpx">{{project.companyDesc}}</text>
            </view>
        </view>
        <view class="content">
            <view class="title">
                <view>
                    <text>{{project.projectName}}</text>
                </view>
                <view class="tag">
                    <u-tag :text="sexFormat(project.sex)" v-if="project.sex !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5"
                           mode="light" size="mini"/>
                    <u-tag :text="project.age" v-if="project.age !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5"
                           mode="light" size="mini"/>
                    <u-tag :text="educationFormat(project.education)" v-if="project.education !== ''" type="info"
                           bg-color="#F5F5F5"
                           border-color="#F5F5F5" mode="light" size="mini"/>
                </view>
                <view class="priceMonth">
                    <view class="price">
                        <text style="color:#258CFF">{{project.positionSalary}}</text>
                        <text style="font-size:24rpx;color:black">/{{project.salaryUnit}}</text>
                    </view>
                    <view class="month">
                        <u-button type="primary" disabled plain=true size="mini">{{salaryTypeFormat(project.salaryType)}}
                        </u-button>
                    </view>
                </view>
            </view>
            <view class="line"></view>
            <view class="desc">
                <view class="contentBigTitle">
                    <view class="blueBar"></view>
                    <view>
                        <text>任务描述</text>
                    </view>
                </view>
                <view class="contentSmallTitle">
                    <view class="descTitle">
                        <text>工作内容:</text>
                    </view>
                    <view class="descContent">
                        <text>{{project.workDesc}}</text>
                    </view>
                </view>
                <view class="contentSmallTitle">
                    <view class="descTitle">
                        <text>工作时间:</text>
                    </view>
                    <view class="descContent">
                        <text>{{project.workDate}}</text>
                    </view>
                </view>
                <view class="contentSmallTitle">
                    <view class="descTitle">
                        <text>工资说明:</text>
                    </view>
                    <view class="descContent">
                        <text>{{project.salaryDesc}}</text>
                    </view>
                </view>
            </view>
            <view class="line"></view>
            <view class="workInfo">
                <view class="contentBigTitle">
                    <view class="blueBar"></view>
                    <view>
                        <text>工作信息</text>
                    </view>
                </view>
                <view class="contentSmallTitle">
                    <view class="descTitle">
                        <text>用工周期:</text>
                    </view>
                    <view class="descContent">
                        <text>{{project.workPeriod}}</text>
                    </view>
                </view>
                <view class="contentSmallTitle">
                    <view class="descTitle">
                        <text>工作地点:</text>
                    </view>
                    <view class="descContent">
                        <u-icon name="map-fill" color="#2979ff" size="28"></u-icon>
                        <text>\t\t</text>
                        <text>{{project.workAddr}}</text>
                    </view>
                </view>
            </view>
            <view class="line"></view>
            <view class="foot">
                <view>
                    <text style="font-size:20rpx;">已报名:\t\t</text>
                    <text style="font-size:36rpx;color:#2C8FFF;">{{project.signNum}}</text>
                    <text style="font-size:20rpx;color:#2C8FFF;">人</text>
                </view>
                <view class="twoButton">
                    <view class="button">
                        <u-button type="default" open-type="share" shape="circle" size="medium">分享</u-button>
                    </view>
                    <view v-if="merType === '1' || merType === ''">
                        <view class="button" v-if="project.isSign === '0'">
                            <u-button type="primary" shape="circle" size="medium" @click="userSign">报名</u-button>
                        </view>
                        <view class="button" v-if="project.isSign === '1'">
                            <u-button type="primary" shape="circle" size="medium" disabled=true>已报名</u-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <u-modal v-model="signShow" :content="signContent" @confirm="signConfirm" confirm-text="报名"
                 show-cancel-button="true"></u-modal>
        <u-modal v-model="authShow" :content="authContent" @confirm="authConfirm" confirm-text="去实名"
                 show-cancel-button="true"></u-modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                merType: '',
                salaryTypeOptions: [],
                sexOptions: [],
                educationOptions: [],
                iconUrl: this.iconUrl,
                signShow: false,
                signContent: '是否确认报名?',
                authShow: false,
                authContent: '实名认证后才可以报名',
                project: undefined,
                userInfo: undefined,
            }
        },
        onLoad(option) {
            this.merType = uni.getStorageSync('mer_type');
            this.getDetail(option.id);
            this.$getDictList('salary_type', {
                success: (cts) => {
                    this.salaryTypeOptions = cts.data;
                }
            });
            this.$getDictList('sex', {
                success: (cts) => {
                    this.sexOptions = cts.data;
                }
            });
            this.$getDictList('education', {
                success: (cts) => {
                    this.educationOptions = cts.data;
                }
            });


        },
        onShareAppMessage(res) {
            return {
                title: '资税通',
                path: '/pages/task/index'
            }
        },

        methods: {
            getDetail(id) {
                this.$sendRequest({
                    url: '/api/wx/getProjectDetail',
                    method: 'POST',
                    data: {
                        id: id
                    },
                    success: (cts) => {
                        this.project = cts.data;
                        console.log(this.project);
                    }
                });
            },
            // 注册渠道字典翻译
            salaryTypeFormat(salaryType) {
                return this.$selectDictLabel(this.salaryTypeOptions, salaryType);
            },
            // 性别转换
            sexFormat(sex) {
                return this.$selectDictLabel(this.sexOptions, sex);
            },
            // 学历转换
            educationFormat(education) {
                return this.$selectDictLabel(this.educationOptions, education);
            },
            userSign() {
                this.signShow = true;
            },
            signConfirm() {
                //未实名认证 => 跳转实名认证页面
                this.$sendRequest({
                    url: '/api/wx/userIsAuth',
                    method: 'POST',
                    success: (cts) => {
                        this.userInfo = cts.data;
                        if (cts.data.certStatus !== '2') {
                            this.authShow = true;
                        } else {
                            this.$sendRequest({
                                url: '/api/wx/userSign',
                                method: 'POST',
                                data: {
                                    id: this.project.id
                                },
                                success: (cts) => {
                                    uni.showToast({
                                        title: "报名成功",
                                        type: "success",
                                        icon: 'none'
                                    });
                                    this.getDetail(this.project.id);
                                }
                            });
                        }
                    }
                });

            },
            authConfirm() {
                uni.navigateTo({
                    url: "/pages/mine/userAuth"
                });
            }
        }
    }
</script>

<style lang="scss">
    .line {
        width: 600rpx;
        height: 1rpx;
        background: rgb(214, 212, 212);
        margin: 20rpx 0 20rpx 0;
    }

    .container {
        position: relative;

        .banner image {
            width: 100%;
            height: 430rpx;
        }

        .topTitle {
            color: #FFFFFF;
            width: 680rpx;
            height: 400rpx;
            margin: 0rpx 30rpx;
            position: absolute;
            top: 70rpx;

            .companyName {
                display: flex;

                image {
                    width: 64rpx;
                    height: 64rpx;
                }

                text {
                    font-size: 34rpx;
                    display: block;
                    margin-top: 12rpx;
                    margin-left: 6rpx;
                }
            }

            .companyInfo {
                display: flex;
                padding: 30rpx 0 20rpx 0;

                .greenBar {
                    width: 6rpx;
                    height: 24rpx;
                    margin-top: 12rpx;
                    background-color: #a6ff18;
                }

                text {
                    display: block;
                    font-size: 36rpx;
                    margin-left: 16rpx;
                }

            }
        }

        .content {
            background-color: #FFFFFF;
            width: 686rpx;
            margin: 0rpx 0rpx 80rpx 30rpx;
            position: absolute;
            top: 380rpx;
            border-radius: 20rpx;
            display: flex;
            flex-direction: column;
            padding: 40rpx 30rpx 40rpx 30rpx;

            .title {
                text {
                    font-size: 36rpx;
                }
            }

            .priceMonth {
                display: flex;
                justify-content: space-between;

                .month {
                    padding: 2rpx 4rpx;
                    text {
                        font-size: 22rpx;
                        border: 1 solid #1885FF;
                    }
                }
            }

            .tag {
                margin: 20rpx 0 20rpx 0;

                u-tag {
                    margin-right: 16rpx;
                }

            }

            .contentBigTitle {
                display: flex;
                padding: 30rpx 0 20rpx 0;

                .blueBar {
                    width: 6rpx;
                    height: 24rpx;
                    margin-top: 6rpx;
                    background-color: #1885FF;
                }

                text {
                    display: block;
                    font-size: 28rpx;
                    margin-left: 16rpx;
                }
            }

            .contentSmallTitle {
                margin-bottom: 30rpx;

                .descTitle text {
                    font-size: 24rpx;
                }

                .descContent text {
                    font-size: 22rpx;
                }
            }

            .foot {
                .twoButton {
                    display: flex;
                    justify-content: flex-end;

                    .button {
                        padding: 10rpx;
                    }

                }
            }

        }
    }


</style>
